<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="UID号" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="用户UID号" clearable style="width: 230px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="支付类型" prop="payType">
        <el-select v-model="queryParams.payType" placeholder="支付类型">
          <el-option v-for="dict in payTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="支付状态" prop="payStatus">
        <el-select v-model="queryParams.payStatus" clearable>
          <el-option v-for="dict in verifyList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="确认状态" prop="orderPayState">
        <el-select v-model="queryParams.orderPayState" clearable>
          <el-option v-for="dict in orderPayStateList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRange" style="width: 340px" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
          ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--<el-col :span="1.5">-->
        <!--<el-button type="primary" icon="el-icon-download" size="mini" @click="exportExcel" v-hasPermi="['publicBill:bankFlow:export']">导出</el-button>-->
      <!--</el-col>-->
      <!-- <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar> -->
    </el-row>

    <el-table :height="tableHeight" @sort-change="changeTableSort" v-loading="loading" :data="bankrecordList" stripe border>
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column label="支付订单号" prop="orderNo" width="80" align="center" show-overflow-tooltip/>
      <el-table-column label="消费订单号" prop="bizOrderNo" width="160" align="center" />
      <el-table-column label="商品名称" prop="goodsName" width="120" align="center" />
      <el-table-column label="交易日期" align="center" prop="requestTime" width="180" :sortable="'custom'" />
      <el-table-column label="UID" prop="userId" width="100" align="center" :sortable="'userId'" />
      <el-table-column label="充值金额(元)" prop="totalAmount" width="100" align="center" :sortable="'totalAmount'" />
      <el-table-column label="赠送额度" prop="giveGold" width="100" align="center" :sortable="'giveGold'" />
      <el-table-column label="支付类型" prop="payType"  align="center" :sortable="'payType'">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payType == 'huifu'" >汇付</el-tag>
          <el-tag v-if="scope.row.payType == 'offline'">线下银行</el-tag>
          <el-tag v-if="scope.row.payType != 'offline'&&scope.row.payType != 'huifu'">{{scope.row.payType}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" prop="payStatus" align="center" :sortable="'payStatus'">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payStatus == 0" type="danger">待支付</el-tag>
          <el-tag v-if="scope.row.payStatus == 1" type="success">已支付</el-tag>
          <el-tag v-if="scope.row.payStatus == 2" type="info">未支付关闭</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单付款确认" prop="orderPayState" align="center" :sortable="'orderPayState'">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderPayState == 0" type="danger">待付款</el-tag>
          <el-tag v-if="scope.row.orderPayState == 1" type="info">待确认</el-tag>
          <el-tag v-if="scope.row.orderPayState == 2" type="success">已确认</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="cardName" width="60" align="center" :sortable="'cardName'" />
      <el-table-column label="卡号" prop="cardNumber" width="100" align="center" :sortable="'cardNumber'" />
      <el-table-column label="银行" prop="bankName" width="100" align="center" :sortable="'bankName'" />
      <el-table-column label="操作" fixed="right" align="center" width="180">
        <template slot-scope="scope">
          <el-button v-if="scope.row.payStatus == 0&&scope.row.payType == 'offline'" type="text" icon="" @click.stop="confirmConsumeOrderCashIn(scope.row)" v-hasPermi="['publicBill:bankFlow:cashIn']">入金</el-button>
          <el-button v-if="scope.row.payStatus == 0&&scope.row.payType == 'alipay'" type="text" icon="" @click.stop="sendConsumeOrderAlipayQuery(scope.row)" v-hasPermi="['publicBill:bankFlow:alipayQuery']">查询验证</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改角色配置对话框 -->
    <Z-Dialog :title="title" :visible.sync="open" :isShowConfirm="false">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="平台对公账户" prop="mutualAccount">
          <el-input class="form-input" v-model="form.mutualAccount" readonly />
        </el-form-item>
        <el-form-item label="交易日期" prop="transactionDate">
          <el-input class="form-input" v-model="form.transactionDate" readonly />
        </el-form-item>
        <el-form-item label="币种" prop="currency">
          <el-input class="form-input" v-model="form.currency" readonly />
        </el-form-item>
        <el-form-item label="会计流水" prop="accountingFlow">
          <el-input class="form-input" v-model="form.accountingFlow" readonly />
        </el-form-item>
        <el-form-item label="借贷标记" prop="borrowingMark">
          <el-select v-model="form.borrowingMark" clearable style="width:100%" readonly>
            <el-option v-for="dict in borrowingMarkList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易金额(元)" prop="transactionAmount">
          <el-input class="form-input" v-model="form.transactionAmount" readonly />
        </el-form-item>
        <el-form-item label="对方账号" prop="oppositeAccount">
          <el-input class="form-input" v-model="form.oppositeAccount" readonly />
        </el-form-item>
        <el-form-item label="对方账户名" prop="oppositeAccountName">
          <el-input class="form-input" v-model="form.oppositeAccountName" readonly />
        </el-form-item>
        <el-form-item label="对方开户行" prop="oppositeBank">
          <el-input class="form-input" v-model="form.oppositeBank" readonly />
        </el-form-item>
        <el-form-item label="账户余额(元)" prop="accountBalance">
          <el-input class="form-input" v-model="form.accountBalance" readonly />
        </el-form-item>
        <el-form-item label="摘要" prop="information">
          <el-input class="form-input" v-model="form.information" readonly />
        </el-form-item>
        <el-form-item label="附言" prop="postscript">
          <el-input class="form-input" v-model="form.postscript" readonly />
        </el-form-item>
        <el-form-item label="凭证种类" prop="vouchertype">
          <el-input class="form-input" v-model="form.vouchertype" readonly />
        </el-form-item>
        <el-form-item label="企业端流水号" prop="enterpriseNumber">
          <el-input class="form-input" v-model="form.enterpriseNumber" readonly />
        </el-form-item>
        <el-form-item label="备注1" prop="note1">
          <el-input class="form-input" v-model="form.note1" readonly />
        </el-form-item>
        <el-form-item label="备注2" prop="note2">
          <el-input class="form-input" v-model="form.note2" readonly />
        </el-form-item>
        <el-form-item label="备注3" prop="note3">
          <el-input class="form-input" v-model="form.note3" readonly />
        </el-form-item>
        <el-form-item label="对账" prop="isVerify">
          <el-select v-model="form.isVerify" clearable style="width:100%" disabled>
            <el-option v-for="dict in verifyList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </Z-Dialog>

  </div>
</template>

<script>
import { listBankUnionrecord ,consumeOrderCashIn,consumeOrderAlipayQuery} from "@/api/publicBill/bankrecord";
import { screenUser } from "@/api/system/user";

export default {
  name: "BankFlow",
  data() {
    return {
      //上传的图片
      dialogVisible: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      bankrecordList: [],
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      handleViewShow: false,
      // 日期范围
      dateRange: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.global.pageSize,
        payStatus:0,
        orderPayState:-1,
        status: undefined,
        beginTime: undefined,
        endTime: undefined,
      },
      pageNum: 1,
      borrowingMarkList: [{ label: '出账', value: 1 }, { label: '入账', value: 2 }],

      // 0待支付 1已支付 2 未支付关闭
      verifyList: [
        { label: '全部', value: -1 },
        { label: '待支付', value: 0 },
        { label: '已支付', value: 1 },
        { label: '未支付关闭', value: 2 },
      ],
      orderPayStateList:  [
        { label: '全部', value: -1 },
        { label: '待付款', value: 0 },
        { label: '待确认', value: 1 },
        { label: '已确认', value: 2 },
      ],
      //支付类型
      payTypeList: [
        { label: '快捷支付', value: 'huifu' },
        { label: '微信', value: 'wx' },
        { label: '支付宝', value: 'alipay' },
        { label: '线下银行', value: 'offline' },
      ],
      // 表单参数
      form: {},
    };
  },
  computed: {
    tableHeight() {
      return 'calc(100vh - 320px)'
    },
  },
  watch: {
    "queryParams": {
      deep: true,
      handler: function (newV, oldV) {

        if (this.pageNum == newV.pageNum) {
          this.handleQuery();
        } else {
          this.pageNum = newV.pageNum;
        }
      },
    },
    dateRange() {
      if (this.dateRange) {
        if (this.dateRange.length >= 2) {
          this.queryParams.beginTime = String(this.dateRange[0]);
          this.queryParams.endTime = String(this.dateRange[1]);
        }
      } else {
        this.queryParams.beginTime = undefined;
        this.queryParams.endTime = undefined;
      }
      this.getList();
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listBankUnionrecord(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.bankrecordList = response.data;
          this.total = response.total;
        }
        this.loading = false;
      });
    },

    changeTableSort(column) {
      this.queryParams.orderBy = column.prop;
      this.queryParams.isAsc = (column.order == 'descending' ? 0 : 1); //ascending == 升序 descending == 降序  0 倒,1正
      this.getList();
    },
    confirmConsumeOrderCashIn(data){
      this.$alert('确定给【' + data.userId + '消费订单 '+data.bizOrderNo+'】 充值 【' + data.giveGold + '元】', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            if (action == 'confirm'){
              let params={"orderId":data.bizOrderId,"rechargeOrderId":data.id}
              consumeOrderCashIn(params).then((response) => {
                this.$modal.msgSuccess("入金成功");
                this.handleViewShow = false;
                this.getList();
              });
            }
          }
        });
    },
    sendConsumeOrderAlipayQuery(data){
      this.$alert('确定给【' + data.userId + '消费订单 '+data.bizOrderNo+'】 请求接口验证', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            if (action == 'confirm'){
              let params={"orderId":data.bizOrderId,"orderId":data.bizOrderId}
              consumeOrderAlipayQuery(params).then((response) => {
                this.$modal.msgSuccess("请求成功");
                this.handleViewShow = false;
                this.getList();
              });
            }
          }
        });
    },
    getScreenUserList() {
      screenUser().then((response) => {
        if (response.code == 200) {
          this.userList = response.data;
        }
      });
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      if (!this.rulesAmount()) {
        return;
      }
      this.queryParams.pageNum = 1;

      this.getList();
    },

    rulesAmount() {
      if (this.queryParams.beginAmount && this.queryParams.endAmount) {
        if (this.queryParams.endAmount < this.queryParams.beginAmount) {
          this.$modal.msgError("金额区间不正确");
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.beginTime = undefined;
      this.queryParams.beginTime = undefined;
      this.queryParams.beginAmount = undefined;
      this.queryParams.endAmount = undefined;
      this.handleQuery();
    }
  },
};
</script>
<style scoped>
</style>
